<template>
	<div class="orbit-parameters-form">
		<div class="form-header">
			<h4>轨道参数设置</h4>
			<div class="template-selector">
				<el-select
					v-model="selectedTemplate"
					placeholder="选择轨道模板"
					@change="applyTemplate"
					size="small"
					style="width: 140px"
				>
					<el-option
						v-for="template in orbitTemplates"
						:key="template.key"
						:label="template.name"
						:value="template.key"
					/>
				</el-select>
			</div>
		</div>

		<el-form :model="formData" :rules="rules" ref="formRef" label-width="120px" size="small" class="parameters-form">
			<!-- 半长轴 -->
			<el-form-item label="半长轴 (km)" prop="semiMajorAxis">
				<div class="param-input-group">
					<el-input-number
						v-model="formData.semiMajorAxis"
						:min="paramConfig.semiMajorAxis.min"
						:max="paramConfig.semiMajorAxis.max"
						:step="paramConfig.semiMajorAxis.step"
						:precision="paramConfig.semiMajorAxis.precision"
						controls-position="right"
						@change="handleParamChange"
					/>
					<el-slider
						v-model="formData.semiMajorAxis"
						:min="paramConfig.semiMajorAxis.min"
						:max="paramConfig.semiMajorAxis.max"
						:step="paramConfig.semiMajorAxis.step"
						show-input-controls="false"
						@change="handleParamChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">地球半径: 6371 km，最小值为地球半径</div>
			</el-form-item>

			<!-- 偏心率 -->
			<el-form-item label="偏心率" prop="eccentricity">
				<div class="param-input-group">
					<el-input-number
						v-model="formData.eccentricity"
						:min="paramConfig.eccentricity.min"
						:max="paramConfig.eccentricity.max"
						:step="paramConfig.eccentricity.step"
						:precision="paramConfig.eccentricity.precision"
						controls-position="right"
						@change="handleParamChange"
					/>
					<el-slider
						v-model="formData.eccentricity"
						:min="paramConfig.eccentricity.min"
						:max="paramConfig.eccentricity.max"
						:step="paramConfig.eccentricity.step"
						show-input-controls="false"
						@change="handleParamChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">0: 圆轨道，0-1: 椭圆轨道，>1: 双曲轨道</div>
			</el-form-item>

			<!-- 轨道倾角 -->
			<el-form-item label="轨道倾角 (°)" prop="inclination">
				<div class="param-input-group">
					<el-input-number
						v-model="formData.inclination"
						:min="paramConfig.inclination.min"
						:max="paramConfig.inclination.max"
						:step="paramConfig.inclination.step"
						:precision="paramConfig.inclination.precision"
						controls-position="right"
						@change="handleParamChange"
					/>
					<el-slider
						v-model="formData.inclination"
						:min="paramConfig.inclination.min"
						:max="paramConfig.inclination.max"
						:step="paramConfig.inclination.step"
						show-input-controls="false"
						@change="handleParamChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">0°: 赤道轨道，90°: 极轨道，>90°: 逆行轨道</div>
			</el-form-item>

			<!-- 升交点赤经 -->
			<el-form-item label="升交点赤经 (°)" prop="raan">
				<div class="param-input-group">
					<el-input-number
						v-model="formData.raan"
						:min="paramConfig.raan.min"
						:max="paramConfig.raan.max"
						:step="paramConfig.raan.step"
						:precision="paramConfig.raan.precision"
						controls-position="right"
						@change="handleParamChange"
					/>
					<el-slider
						v-model="formData.raan"
						:min="paramConfig.raan.min"
						:max="paramConfig.raan.max"
						:step="paramConfig.raan.step"
						show-input-controls="false"
						@change="handleParamChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">轨道平面与赤道平面交线的方向</div>
			</el-form-item>

			<!-- 近地点幅角 -->
			<el-form-item label="近地点幅角 (°)" prop="argumentOfPerigee">
				<div class="param-input-group">
					<el-input-number
						v-model="formData.argumentOfPerigee"
						:min="paramConfig.argumentOfPerigee.min"
						:max="paramConfig.argumentOfPerigee.max"
						:step="paramConfig.argumentOfPerigee.step"
						:precision="paramConfig.argumentOfPerigee.precision"
						controls-position="right"
						@change="handleParamChange"
					/>
					<el-slider
						v-model="formData.argumentOfPerigee"
						:min="paramConfig.argumentOfPerigee.min"
						:max="paramConfig.argumentOfPerigee.max"
						:step="paramConfig.argumentOfPerigee.step"
						show-input-controls="false"
						@change="handleParamChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">近地点相对于升交点的角度</div>
			</el-form-item>

			<!-- 平近点角 -->
			<el-form-item label="平近点角 (°)" prop="meanAnomaly">
				<div class="param-input-group">
					<el-input-number
						v-model="formData.meanAnomaly"
						:min="paramConfig.meanAnomaly.min"
						:max="paramConfig.meanAnomaly.max"
						:step="paramConfig.meanAnomaly.step"
						:precision="paramConfig.meanAnomaly.precision"
						controls-position="right"
						style="width: 100%"
						@change="handleParamChange"
					/>
					<el-slider
						v-model="formData.meanAnomaly"
						:min="paramConfig.meanAnomaly.min"
						:max="paramConfig.meanAnomaly.max"
						:step="paramConfig.meanAnomaly.step"
						show-input-controls="false"
						@change="handleParamChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">卫星在轨道上的初始位置角度</div>
			</el-form-item>

			<!-- 地球透明度控制 -->
			<el-form-item label="地球透明度">
				<div class="param-input-group">
					<el-input-number
						v-model="earthTransparency"
						:min="0"
						:max="1"
						:step="0.1"
						:precision="1"
						controls-position="right"
						@change="handleTransparencyChange"
						style="width: 120px"
					/>
					<el-slider
						v-model="earthTransparency"
						:min="0"
						:max="1"
						:step="0.1"
						show-input-controls="false"
						@change="handleTransparencyChange"
						class="param-slider"
					/>
				</div>
				<div class="param-hint">0为完全透明，1为完全不透明</div>
			</el-form-item>

			<!-- 操作按钮 -->
			<el-form-item>
				<div class="form-actions">
					<el-button @click="resetForm"> 重置 </el-button>
					<el-button :type="showReferenceSystem ? 'primary' : 'default'" @click="toggleReferenceSystem" icon="View">
						{{ showReferenceSystem ? '隐藏坐标系' : '显示坐标系' }}
					</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';

// Props
const props = defineProps({
	orbitParams: {
		type: Object,
		required: true
	},
	enableRealTime: {
		type: Boolean,
		default: false
	}
});

// Emits
const emit = defineEmits(['update:orbit-params', 'apply-template', 'real-time-update', 'reference-system-toggle', 'earth-transparency-change']);

// 坐标系显示状态
const showReferenceSystem = ref(false);

// 地球透明度
const earthTransparency = ref(0.1);

// 表单引用
const formRef = ref();

// 选中的模板
const selectedTemplate = ref('');

// 表单数据
const formData = reactive({ ...props.orbitParams });

// 轨道模板
const orbitTemplates = [
	{
		key: 'leo-sun-sync',
		name: 'LEO太阳同步',
		description: '低地球轨道太阳同步轨道',
		params: {
			semiMajorAxis: 7178, // ~800km高度
			eccentricity: 0.001,
			inclination: 98.2,
			raan: 0.0,
			argumentOfPerigee: 0.0,
			meanAnomaly: 0.0
		}
	},
	{
		key: 'leo-iss',
		name: 'LEO国际空间站',
		description: '国际空间站轨道参数',
		params: {
			semiMajorAxis: 6793, // ~420km高度
			eccentricity: 0.0003,
			inclination: 51.6,
			raan: 0.0,
			argumentOfPerigee: 0.0,
			meanAnomaly: 0.0
		}
	},
	{
		key: 'meo-gps',
		name: 'MEO GPS',
		description: 'GPS卫星轨道',
		params: {
			semiMajorAxis: 26560, // ~20200km高度
			eccentricity: 0.02,
			inclination: 55.0,
			raan: 0.0,
			argumentOfPerigee: 0.0,
			meanAnomaly: 0.0
		}
	},
	{
		key: 'geo-stationary',
		name: 'GEO地球静止',
		description: '地球静止轨道',
		params: {
			semiMajorAxis: 42164, // ~35786km高度
			eccentricity: 0.0,
			inclination: 0.0,
			raan: 0.0,
			argumentOfPerigee: 0.0,
			meanAnomaly: 0.0
		}
	},
	{
		key: 'heo-molniya',
		name: 'HEO闪电轨道',
		description: '高椭圆闪电轨道',
		params: {
			semiMajorAxis: 26600,
			eccentricity: 0.74,
			inclination: 63.4,
			raan: 0.0,
			argumentOfPerigee: 270.0,
			meanAnomaly: 0.0
		}
	}
];

// 轨道参数配置
const paramConfig = {
	semiMajorAxis: {
		min: 6571, // 地球半径+200，理论最小值
		max: 50000, // 实用最大值，约44000km为地球静止轨道
		step: 50, // 50km步长，适合轨道设计
		precision: 0
	},
	eccentricity: {
		min: 0, // 圆轨道
		max: 0.95, // 高椭圆轨道上限
		step: 0.01, // 0.01步长，便于调整
		precision: 3
	},
	inclination: {
		min: 0, // 赤道轨道
		max: 180, // 逆行轨道
		step: 1, // 1度步长
		precision: 1
	},
	raan: {
		min: 0, // 升交点赤经范围
		max: 360, // 完整圆周
		step: 5, // 5度步长，便于快速调整
		precision: 1
	},
	argumentOfPerigee: {
		min: 0, // 近地点幅角范围
		max: 360, // 完整圆周
		step: 5, // 5度步长
		precision: 1
	},
	meanAnomaly: {
		min: 0, // 平近点角范围
		max: 360, // 完整圆周
		step: 10, // 10度步长，用于设置初始位置
		precision: 1
	}
};

// 表单验证规则
const rules = {
	semiMajorAxis: [
		{ required: true, message: '请输入半长轴', trigger: 'blur' },
		{
			type: 'number',
			min: paramConfig.semiMajorAxis.min,
			max: paramConfig.semiMajorAxis.max,
			message: `半长轴必须在${paramConfig.semiMajorAxis.min}-${paramConfig.semiMajorAxis.max}km之间`,
			trigger: 'blur'
		}
	],
	eccentricity: [
		{ required: true, message: '请输入偏心率', trigger: 'blur' },
		{
			type: 'number',
			min: paramConfig.eccentricity.min,
			max: paramConfig.eccentricity.max,
			message: `偏心率必须在${paramConfig.eccentricity.min}-${paramConfig.eccentricity.max}之间`,
			trigger: 'blur'
		}
	],
	inclination: [
		{ required: true, message: '请输入轨道倾角', trigger: 'blur' },
		{
			type: 'number',
			min: paramConfig.inclination.min,
			max: paramConfig.inclination.max,
			message: `轨道倾角必须在${paramConfig.inclination.min}-${paramConfig.inclination.max}度之间`,
			trigger: 'blur'
		}
	],
	raan: [
		{ required: true, message: '请输入升交点赤经', trigger: 'blur' },
		{
			type: 'number',
			min: paramConfig.raan.min,
			max: paramConfig.raan.max,
			message: `升交点赤经必须在${paramConfig.raan.min}-${paramConfig.raan.max}度之间`,
			trigger: 'blur'
		}
	],
	argumentOfPerigee: [
		{ required: true, message: '请输入近地点幅角', trigger: 'blur' },
		{
			type: 'number',
			min: paramConfig.argumentOfPerigee.min,
			max: paramConfig.argumentOfPerigee.max,
			message: `近地点幅角必须在${paramConfig.argumentOfPerigee.min}-${paramConfig.argumentOfPerigee.max}度之间`,
			trigger: 'blur'
		}
	],
	meanAnomaly: [
		{ required: true, message: '请输入平近点角', trigger: 'blur' },
		{
			type: 'number',
			min: paramConfig.meanAnomaly.min,
			max: paramConfig.meanAnomaly.max,
			message: `平近点角必须在${paramConfig.meanAnomaly.min}-${paramConfig.meanAnomaly.max}度之间`,
			trigger: 'blur'
		}
	]
};

// 表单是否有效
const isFormValid = computed(() => {
	return (
		formData.semiMajorAxis >= 6371 &&
		formData.semiMajorAxis <= 100000 &&
		formData.eccentricity >= 0 &&
		formData.eccentricity < 1 &&
		formData.inclination >= 0 &&
		formData.inclination <= 180 &&
		formData.raan >= 0 &&
		formData.raan <= 360 &&
		formData.argumentOfPerigee >= 0 &&
		formData.argumentOfPerigee <= 360 &&
		formData.meanAnomaly >= 0 &&
		formData.meanAnomaly <= 360
	);
});

// 监听props变化
watch(
	() => props.orbitParams,
	(newParams) => {
		Object.assign(formData, newParams);
	},
	{ deep: true }
);

// 处理参数变化
const handleParamChange = () => {
	emit('update:orbit-params', { ...formData });

	// 如果启用实时模式，触发实时更新
	if (props.enableRealTime && isFormValid.value) {
		emit('real-time-update', { ...formData });
	}
};

// 应用模板
const applyTemplate = () => {
	if (!selectedTemplate.value) return;

	const template = orbitTemplates.find((t) => t.key === selectedTemplate.value);
	if (template) {
		Object.assign(formData, template.params);
		emit('apply-template', template);
		selectedTemplate.value = '';
	}
};

// 重置表单
const resetForm = () => {
	if (formRef.value) {
		formRef.value.resetFields();
	}
	// 重置为太阳同步轨道参数
	Object.assign(formData, {
		semiMajorAxis: 7178, // ~800km高度
		eccentricity: 0.001,
		inclination: 98.2,
		raan: 0.0,
		argumentOfPerigee: 0.0,
		meanAnomaly: 0.0
	});
	handleParamChange();
};

// 切换坐标系显示
const toggleReferenceSystem = () => {
	showReferenceSystem.value = !showReferenceSystem.value;
	emit('reference-system-toggle', showReferenceSystem.value);
};

// 处理地球透明度变化
const handleTransparencyChange = () => {
	emit('earth-transparency-change', earthTransparency.value);
};
</script>

<style scoped>
.orbit-parameters-form {
	width: 100%;
}

.form-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.form-header h4 {
	margin: 0;
	color: #303133;
	font-size: 16px;
	font-weight: 600;
}

.parameters-form {
	max-width: 100%;
}

.param-hint {
	margin-top: 4px;
	color: #909399;
	font-size: 12px;
	line-height: 1.4;
}

.param-input-group {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
}

.param-input-group .el-input-number {
	flex: 0 0 100px;
}

.param-input-group .param-slider {
	flex: 1;
	min-width: 120px;
}

.param-slider {
	margin-top: 0;
	padding: 0 4px;
}

.form-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

:deep(.el-form-item) {
	margin-bottom: 20px;
	align-items: flex-start;
}

:deep(.el-form-item__label) {
	font-weight: 500;
	color: #303133;
	line-height: 32px;
	padding-top: 6px;
}

:deep(.el-form-item__content) {
	align-items: flex-start;
}

:deep(.el-input-number) {
	width: 100%;
}

:deep(.el-input-number .el-input__inner) {
	text-align: left;
}

:deep(.el-slider) {
	margin: 0;
}

:deep(.el-slider__runway) {
	margin: 8px 0;
	height: 8px;
	background-color: #e4e7ed;
	border-radius: 4px;
}

:deep(.el-slider__bar) {
	background: linear-gradient(90deg, #409eff 0%, #66b3ff 100%);
	height: 8px;
	border-radius: 4px;
}

:deep(.el-slider__button) {
	width: 20px;
	height: 20px;
	border: 3px solid #409eff;
	background-color: #ffffff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
	transition: all 0.2s ease;
}

:deep(.el-slider__button:hover) {
	border-color: #66b3ff;
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
	transform: scale(1.1);
}
</style>
